<template>
  <div class="container">
    <div class="refund-head">
      <div class="font-15">{{afterSaleStatus}}</div>
      <div class="mar-t-10 font-12" v-if="showTime">{{showTime}}</div>
    </div>
    <div class="height-48 v-align-c pad-l-15 pad-r-15 font-12 bg-color-white" v-if="afterSaleStatus === '退款关闭'">
      <div v-if="refundData.afterSaleStatus === -2">因您确认收货，本次申请关闭</div>
      <div v-if="refundData.afterSaleStatus === 4 || refundData.afterSaleStatus === -3">账期结束，退款关闭</div>
    </div>
    <div class="refund-reason" v-if="afterSaleStatus === '退款失败'">
      <div class="flex font-12" v-if="refundData.afterSaleStatus === -1">
        <span>拒绝原因：</span>
        <span class="flex-item font-w">{{refundData.rejectReason}}</span>
      </div>      
      <div class="align-r" v-if="type !== 'seller'">
        <div class="reapply-btn" @click="linkToRefund">重新申请</div>
      </div>
    </div>
    <div class="refund-price mar-t-10">
      <div class="flex flex-between">
        <div class="v-align-c">
          <span>退款总金额(不含运费)</span>
          <van-icon class="mar-l-2" name="question-o" size="15px" @click="refundExplain" />
        </div>
        <div class="font-15">￥{{refundData.refundAmount}}</div>
      </div>
      <div class="flex flex-between">
        <div>退款方式</div>
        <div class="font-w font-14">{{afterSaleType[refundData.afterSaleType]}}</div>
      </div>
    </div>
    <div class="font-13 font-color-6 pad-t-12 pad-b-12 pad-l-15 pad-r-15 bg-color-white mar-t-10" v-if="refundData.receiveFullAddress">
      <div class="flex flex-between font-14 font-color">
        <span>退货地址</span>
        <div class="copy-btn" @click="$pt.setClipboardData({data: receiveDetails})">复制</div>
      </div>
      <div class="mar-t-9">
        <span>收件人：</span>
        <span>{{refundData.receiveName}}</span>
      </div>
      <div>
        <span>联系电话：</span>
        <span>{{refundData.receivePhone}}</span>
      </div>
      <div class="flex">
        <span>详细地址：</span>
        <span class="flex-item">{{refundData.receiveFullAddress}}</span>
      </div>
    </div>
    <div class="refund-info mar-t-10">
      <div class="pad-l-15 pad-t-20 pad-b-16 line-h-1 bg-color-white">退款信息</div>
      <div class="pad-l-15 pad-r-15 pad-t-10 pad-b-10 bg-color-fa" @click="linkToDetail">
        <div class="v-align-t">
          <div class="width-79 height-79">
            <img class="width-79 height-79 goodImg" v-if="goods.goodsImageUrl" :src="goods.goodsImageUrl" alt="">
          </div>
          <div class="line-2 mar-l-10 flex-item font-13">{{goods.goodsTitle}}</div>
        </div>
        <div class="flex flex-between height-51 pad-l-10 pad-r-15 sku-row">
          <div class="font-12 font-color-6">
            <div class="flex sku-detail" v-if="goods.skuDetail">
              <div>规格：</div>
              <div class="width-200 line-1">{{goods.skuDetail}}</div>
            </div>
            <div>￥{{goods.goodsPrice}}<span v-if="goods.unit">/{{goods.unit}}</span></div>
          </div>
          <div>×{{goods.goodsNum}}</div>
        </div>
        <div class="font-13 color-r flex flex-center pad-t-17 pad-b-17 border-b">
          <span>查看详情</span>
          <van-icon name="arrow" size="13px" color="#FF4E23" />
        </div>
      </div>
    </div>
    <div class="order-info font-12">
      <div class="flex flex-between">
        <div>
          <span class="font-color-9">订单编号：</span>
          <span>{{refundData.orderNo}}</span>
        </div>
        <div class="copy-btn" @click="$pt.setClipboardData({data: refundData.orderNo})">复制</div>
      </div>
      <div>
        <span class="font-color-9">申请时间：</span>
        <span>{{refundData.createTime}}</span>
      </div>
      <div>
        <span class="font-color-9">退款数量：</span>
        <span>{{refundData.goodsNum}}</span>
      </div>
      <div>
        <span class="font-color-9">退款原因：</span>
        <span v-if="showRefundType">{{showRefundType}}</span>
      </div>
      <div class="flex">
        <span class="font-color-9">退款说明：</span>
        <span class="flex-item">{{refundData.customerRemark}}</span>
      </div>
      <div class="flex height-70">
        <span class="font-color-9">退款凭证：</span>
        <div class="flex-item refund-voucher">
          <img :src="item.imageUrl" class="width-84 height-70" alt="" v-for="(item, index) in refundData.imageList" :key="index">
        </div>
      </div>
    </div>
    <div class="height-71"></div>
    <div class="fixed-footer">
      <div class="flex-item pos-rel">
        <button open-type="contact" class="contactBtn hidden-submit button-icon"></button>
        <div class="flex flex-center">
          <img v-if="fileSpace" :src="fileSpace + '/images/customer-icon-2.png'" alt="" class="width-21 height-21 mar-r-6">
          <span class="font-16">联系客服</span>
        </div>
      </div>
      <div class="line"></div>
      <div class="flex-item" @click="$pt.makePhoneCall({phoneNumber: refundData.projectOrder.enterprise.phone})">
        <div class="flex flex-center">
          <img v-if="fileSpace" :src="fileSpace + '/images/customer-icon-3.png'" alt="" class="width-21 height-21 mar-r-6">
          <span class="font-16">拨打电话</span>
        </div>
      </div>
      <!-- <van-icon class="mar-t-3" name="phone" color="#333" size="16px" />
      <div class="font-16 font-w mar-l-4">联系卖家</div> -->
    </div>
  </div>
</template>
<script>
import { getRefundDetail, listAfterSaleReason } from '@/api/personal'
export default {
  data() {
    return {
      sku: {},
      refundData: {},
      afterSaleStatus: '',
      showTime: '',
      goods: {},
      status: {
        '0': '退款中',
        '1': '退款中',
        '2': '退款中',
        '3': '退款成功',
        '4': '退款关闭',
        '-1': '退款失败',
        '-2': '退款关闭',
        '-3': '退款关闭',
        '': '退款失败'
      },
      afterSaleType: {
        10: '退货退款',
        20: '仅退款',
        30: '仅退款'
      },
      refundType: {},
      showRefundType: '',
      afterSaleId: '',
      type: '',
      receiveDetails: ''
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  onShow() {
    this.type = this.getCurrentPage().query.type
    let sku = this.getCurrentPage().query.sku
    let afterSaleId = this.getCurrentPage().query.afterSaleId
    if (afterSaleId) {
      this.afterSaleId = afterSaleId
    } else {
      if (sku) {
        this.sku = JSON.parse(sku)
      }
    }
    this.getRefundDetail()
  },
  methods: {
    getRefundDetail() {
      let params = {
        afterSaleId: this.afterSaleId || '',
        orderId: this.sku.orderId || '',
        goodsId: this.sku.goodsId || '',
        skuId: this.sku.skuId || ''
      }
      getRefundDetail(params).then(response => {
        if (response.isError) return
        this.refundData = response.data
        this.receiveDetails = `收件人：${this.refundData.receiveName}\n联系电话：${this.refundData.receivePhone}\n详细地址：${this.refundData.receiveFullAddress}`
        this.goods = this.refundData.goodsList[0]
        let afterSaleStatus = this.refundData.afterSaleStatus
        switch (afterSaleStatus) {
          case -1:
          case -2:
          case -3:
            this.showTime = this.$utils.formatTimeToMD(this.refundData.rejectTime, 'YMD')
            break
          case 0:
            this.showTime = this.$utils.formatTimeToMD(this.refundData.createTime, 'YMD')
            break
          case 1:
            this.showTime = this.$utils.formatTimeToMD(this.refundData.auditTime, 'YMD')
            break
          case 2:
            if (this.refundData.afterSaleType === 30) {
              this.showTime = this.$utils.formatTimeToMD(this.refundData.createTime, 'YMD')
            } else {
              this.showTime = this.$utils.formatTimeToMD(this.refundData.auditTime, 'YMD')
            }
            break
          case 3:
            this.showTime = this.$utils.formatTimeToMD(this.refundData.completedTime, 'YMD')
            break
          case 4:
            this.showTime = this.$utils.formatTimeToMD(this.refundData.closeTime, 'YMD')
            break
          default:
            break
        }
        this.afterSaleStatus = this.status[this.refundData.afterSaleStatus]
        this.listAfterSaleReason()
      })
    },
    listAfterSaleReason() {
      let params = {
        enterpriseId: this.refundData.enterpriseId || this.sku.enterpriseId
      }
      if (this.refundData.afterSaleType === 20) {
        params.refundMoneyFlag = 1
      } else if (this.afterSaleType === 10) {
        params.refundFlag = 1
      }
      listAfterSaleReason(params).then(response => {
        if (response.isError) return
        response.data.forEach(item => {
          this.refundType[item.reasonId] = item.cancelReason
        })
        this.showRefundType = this.refundType[this.refundData.afterSaleReasonId]
      })
    },
    linkToRefund() {
      // 跳转至退款申请页面
      this.$pt.navigateTo({ url: `/pages/order/refund-view/main?afterSaleId=${this.refundData.afterSaleId}` })
    },
    linkToDetail() {
      this.$pt.navigateTo({ url: '/pages/order/distribution/order/detail/main?orderId=' + this.refundData.orderId +
           '&personalType=0&orderFrom=2'})
    },
    refundExplain() {
      this.$pt.showModal({
        title: '退款金额说明',
        content: '最终退款金额以卖家协商后为准',
        showCancel: false,
        confirmText: '朕知道了'
      })
    }
  }
}
</script>
<style lang="less" scoped>
.contactBtn {
  background-color: transparent!important;
  position: absolute;
  width:100%;
  height:100%;
  left: 0;
  top: 0;
  z-index: 999;
  border-color: transparent!important;
  border: none!important;
}
.line-h-1{
  line-height: 1;
}
.refund-head{
  height: 100px;
  padding-left: 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
  background: #FF7200;
  color: white;
}
.bc-fail-color{
  background: #FF0000;
}
.refund-reason{
  height: 100px;
  overflow-y: scroll;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: white;
}
.reapply-btn{
  width: 69px;
  height: 27px;
  box-sizing: border-box;
  color: #666;
  border-radius: 4px;
  border: 1px solid #999;
  text-align: center;
  line-height: 27px;
  font-size: 12px;
}
.refund-price{
  font-size: 12px;
  padding: 18px 15px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 81px;
  box-sizing: border-box;
  background: white;
}
.refund-info{
  .goodImg{
    border-radius: 5px;
  }
  .sku-row{
    border-radius: 4px;
    background: #F2F2F2;
    margin-top: 8px;
    .sku-detail{
      .line-1{
        line-height: unset;
      }
    }
  }
}
.order-info{
  padding: 12px 15px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: white;
  height: 267px;
  .refund-voucher{
    display: flex;
    justify-content: left;
    align-items: center;
  }
}
.fixed-footer{
  height: 54px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  bottom: 0;
  background: white;
  .line{
    border-left: #eeeeee 1px solid;
    height: 30px;
  }
}
.copy-btn{
  width: 43px;
  height: 19px;
  text-align: center;
  line-height: 19px;
  border: 1px solid #CACACA;
  border-radius: 3px;
  font-size: 13px;
}
.bg-color-fa{
  background: #FAFAFA;
}
.color-r{
  color: #FF4E23;
}
</style>
